<template>
  <div>
     <div class="header">
      <van-nav-bar title="编辑地址" @click-left="$router.back()">
        <template #left>
          <van-icon name="arrow-left" size="26" color="#000" />
        </template>
      </van-nav-bar>
      </div>
      <div class="main">
        <van-address-edit
  :area-list="areaList"
  show-postal
  show-delete
  show-set-default
  show-search-result
  :search-result="searchResult"
  :area-columns-placeholder="['请选择', '请选择', '请选择']"
  @save="onSave"
  @delete="onDelete"
  @change-detail="onChangeDetail"
  :address-info="AddressInfo"
/>
      </div>
  </div>
</template>

<script>
import { getAddressList,getAddressDelete, getAddressUpdate } from "../api/address";
import Vue from 'vue';
import {  Toast } from 'vant';
Vue.use(Toast);
import { areaList } from '@vant/area-data';
export default {
  data() {
    return {
      areaList,
      searchResult: [],
      list:'',
      AddressInfo:{},
    };
  },
  methods: {
    onSave(content) {
      getAddressUpdate({
        addressid:content.addressid,
        userid:localStorage.getItem("userid"),
      name:content.name,
      tel:content.tel,
      city:content.city,
      province:content.province,
      county:content.county,
      addressDetail:content.addressDetail,
      isDefault:content.isDefault,


      }).then(()=>{
       
       Toast("已保存")
        this.$router.push("/address")
      }) ;},
    onDelete(content) {
      getAddressDelete({addressid:content.addressid}).then(()=>{
        Toast("已删除")
        this.$router.back()
      })
    },
    onChangeDetail(val) {
      if (val) {
        this.searchResult = [
          {
            name: '黄龙万科中心',
            address: '杭州市西湖区',
          },
        ];
      } else {
        this.searchResult = [];
      }
    },
  },
  created () {
    getAddressList({userid:localStorage.getItem("userid")}).then((res)=>{
        this.list=res.data.data
        const newlist=this.list.filter((item)=>item.addressid==this.$route.params.addressid)
       this.AddressInfo=newlist[0]
    },
   
    )
    
  }
}
</script>

<style>

</style>